<template>
  <el-card>
    <el-form :rules="addRules" :model="addForm" ref="addForm" label-width="120px">
      <el-form-item label="上级" prop="pid">
        <el-select v-model="addForm.pid">
          <el-option value label="请选择"></el-option>
          <el-option
            v-for="item in cates"
            :key="item.id"
            :value="item.id"
            :label="item.catename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input placeholder="请输入分类名称" v-model="addForm.catename"></el-input>
      </el-form-item>
      <el-form-item label="分类图片">
        <!-- 
              auto-upload: 自动上传
              limit:限制上传图片数量
        -->
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :auto-upload="false"
          :on-change="fileChange"
          :limit="1"
          :on-exceed="limitTip"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="addForm.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('addForm')">立即提交</el-button>
        <el-button type="default" @click="resetForm('addForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      cates: [],
      addForm: {
        pid: "",
        catename: "",
        img:'',
        status: 1
      },
      addRules: {
        pid: { required: true, message: "请选择上级分类", trigger: "blur" },
        catename: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur"
        },
        status: { required: true, message: "请选择分类状态", trigger: "blur" }
      }
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 用户选择文件之后的一个回调函数
    fileChange(file){
        // 保存图片的原始信息
        this.addForm.img=file.raw;
    },
    // 上传文件个数超过限制的提示
    limitTip(){
        this.$error('最多只能上传一张图片');
    },
    // 获取上级分类
    async getCates() {
      const res = await this.$http.get("/api/catelist?istree=1");
      if (res.code == 200) {
        this.cates = res.list;
      }
    },
    // 表单提交
    submitForm(form){
        this.$refs[form].validate(async valid=>{
            if(valid){
                // 提交数据: 需要使用FormData的方式进行数据提交
                const fd=new FormData();
                for(let key in this.addForm){
                    fd.append(key,this.addForm[key]);
                }
                const res=await this.$http.post('/api/cateadd',fd);
                if(res.code==200){
                    this.$success('添加成功');
                    // 重置表单
                    this.$refs[form].resetFields();
                }else{
                    this.$error('添加失败');
                }
            }else{
                console.log('表单校验未通过');
            }
        });
    },
    // 重置表单
    resetForm(form){
        this.$refs[form].resetFields();
    }
  },
  created() {
    this.getCates();
  }
};
</script>

<style>
</style>